<template>
  <view class="page-container">
    <!-- 状态标签栏 -->
    <view class="status-tabs">
      <view 
        v-for="tab in tabs" 
        :key="tab.value"
        class="tab-item"
        :class="{ 'active': activeTab === tab.value }"
        @click="activeTab = tab.value"
      >
        {{ tab.label }}
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view 
      class="order-list"
      scroll-y
      :show-scrollbar="false"
    >
      <view 
        v-for="order in filteredOrders"
        :key="order.id"
        class="order-card"
      >
        <view class="order-content">
          <!-- 订单信息 -->
          <view class="info-row">
            <text class="label">救援类型：</text>
            <text class="value">{{ order.rescueType }}</text>
          </view>
          <view class="info-row">
            <text class="label">救援位置：</text>
            <text class="value">{{ order.location }}</text>
          </view>
          <view class="info-row">
            <text class="label">申请时间：</text>
            <text class="value">{{ order.time }}</text>
          </view>
          
          <!-- 状态显示 -->
          <view class="status-tag" :class="statusClass(order.status)">
            {{ statusText(order.status) }}
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <!-- 接单按钮 -->
          <button 
            v-if="order.status === 1"
            class="action-btn"
            @click="acceptOrder(order.id)"
          >
            立即接单
          </button>
          <!-- 取消接单按钮 -->
          <button 
            v-if="order.status === 2"
            class="action-btn cancel-btn"
            @click="cancelOrder(order.id)"
          >
            取消接单
          </button>
          <!-- 已取消状态 -->
          <button 
            v-if="order.status === 4"
            class="action-btn disabled-btn"
            disabled
          >
            已取消
          </button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 状态标签配置
const tabs = [
  { label: '未接单', value: 1 },
  { label: '进行中', value: 2 },
  { label: '已完成', value: 3 }
];

const activeTab = ref(1);

// 假数据
const orders = ref([
  {
    id: 1,
    rescueType: '轮胎更换',
    location: '北京市朝阳区东三环中路32号',
    time: '2023-08-20 14:30',
    status: 1 // 1: 未接单, 2: 进行中, 3: 已完成, 4: 已取消
  },
  {
    id: 2,
    rescueType: '电瓶搭电',
    location: '上海市浦东新区陆家嘴环路128号',
    time: '2023-08-20 15:15',
    status: 2
  },
  {
    id: 3,
    rescueType: '紧急拖车',
    location: '广州市天河区珠江新城金穗路62号',
    time: '2023-08-20 16:00',
    status: 3
  },
  // 更多测试数据...
]);

// 过滤当前状态的订单
const filteredOrders = computed(() => {
  return orders.value.filter(order => order.status === activeTab.value);
});

// 状态样式映射
const statusClass = (status) => {
  return {
    1: 'status-pending',
    2: 'status-processing',
    3: 'status-completed',
    4: 'status-cancelled' // 新增已取消状态
  }[status];
};

// 状态文字映射
const statusText = (status) => {
  return {
    1: '未接单',
    2: '进行中',
    3: '已完成',
    4: '已取消' // 新增已取消状态
  }[status];
};

// 接单操作
const acceptOrder = (orderId) => {
  const order = orders.value.find(o => o.id === orderId);
  if (order) {
    order.status = 2; // 状态改为进行中
    uni.showToast({ title: '接单成功', icon: 'success' });
  }
};

// 取消接单操作
const cancelOrder = (orderId) => {
  const order = orders.value.find(o => o.id === orderId);
  if (order) {
    order.status = 4; // 状态改为已取消
    uni.showToast({ title: '已取消接单', icon: 'none' });
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  padding: 24rpx;
  height: 100vh;
  background-color: #f5f5f5;
}

.status-tabs {
  display: flex;
  margin-bottom: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #666;
    transition: all 0.3s;
    
    &.active {
      color: #2979FF;
      font-weight: 500;
      border-bottom: 4rpx solid #2979FF;
    }
  }
}

.order-list {
  height: calc(100vh - 120rpx);
}

.order-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

  .order-content {
    flex: 1;
  }

  .info-row {
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;

    .label {
      color: #999;
      font-size: 26rpx;
      min-width: 140rpx;
    }

    .value {
      color: #333;
      font-size: 28rpx;
      flex: 1;
    }
  }

  .status-tag {
    display: inline-block;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    font-size: 24rpx;

    &.status-pending {
      background: #ffeaea;
      color: #ff4444;
    }

    &.status-processing {
      background: #e8f3ff;
      color: #2979FF;
    }

    &.status-completed {
      background: #e8ffe8;
      color: #52c41a;
    }

    &.status-cancelled {
      background: #f5f5f5;
      color: #999;
    }
  }

  .action-buttons {
    display: flex;
    gap: 10rpx;
  }

  .action-btn {
    background: #ff4444;
    color: #fff;
    padding: 12rpx 32rpx;
    border-radius: 8rpx;
    font-size: 26rpx;
    white-space: nowrap;
    transition: opacity 0.3s;

    &:active {
      opacity: 0.8;
    }

    &.cancel-btn {
      background: #999;
    }

    &.disabled-btn {
      background: #ccc;
      color: #fff;
      cursor: not-allowed;
    }
  }
}
</style>